<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading"></FullscreenLoading>
		<view class="main-section tabbar-bottom">
			<view class="cover">
				<swiper class="swiper" @change="swiperChange" :current="swiperCurrentIndex" :autoplay="false">
					<swiper-item v-if="data.video">
						<view class="video-cover" :class="videoPlaying?'hidden':''" @click="playVideo">
							<image mode="widthFix" :src="data.cover_400" @error="imageError" class="image"></image>
							<view class="play-btn">
								<text class="iconfont play">&#xe623;</text>
							</view>
						</view>
						<view class="video-player" :class="!videoPlaying?'hidden':''">
							<video id="coverVideo" class="video" :src="data.video_str" @pause="pauseVideo"/>
						</view>
					</swiper-item>
					<swiper-item v-else>
						<view class="video-cover">
							<image mode="widthFix" :src="data.cover_400" @error="imageError" class="image"></image>
						</view>
					</swiper-item>
					<swiper-item v-for="(item,index) in data.images_format" :key="index">
						<view class="swiper-item" @click="util.goToLink(item.link)">
							<image mode="widthFix" :src="item.format" @error="imageError" class="image"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="current">
					<text>{{current}}</text>/<text>{{coverTotal}}</text>
				</view>
			</view>

			<view class="base-info">
				<view class="title">
					{{data.title}}
				</view>
				<view class="description">
					{{data.description}}
				</view>
				
				<view class="price">
					￥ {{data.price}}
				</view>
				<view class="data-info">
					<view class="marking-price">
						￥ {{data.marking_price}}
					</view>
					<view class="exp-info">
						<view class="item view">
							<uni-icons type="eye" size="10" color="#999"></uni-icons> 
							<text class="num">{{data.handling_view}}</text>
						</view>
						<view class="item sales">
							<uni-icons type="cart-filled" size="10" color="#999"></uni-icons> 
							<text class="num">{{data.handling_sales}}</text>
						</view>
						<view class="item favorites">
							<uni-icons type="star" size="10" color="#999"></uni-icons> 
							<text class="num">{{data.handling_sales}}</text>
						</view>
					</view>
				</view>
			</view>
			<!--评价功能-->
			<template v-if="!loading">
				<Evaluate type="Column" :typeId="data.id" />
			</template>
			
			<!--课程详情块-->
			<view class="detail">
				<view class="tab">
					<view class="tab-item tab-content">
						详情
					</view>
				</view>
				<view class="content">
					<!--购买后自定义描述-->
					<view class="custom-desc" v-if="data.purchase == 1">
						<rich-text :nodes="data.custom_desc"></rich-text>
					</view>
					<!--完整描述-->
					<view class="all-content">
						<rich-text :nodes="data.content"></rich-text>
					</view>
					<!--显示版权-->
					<view class="copyright" v-if="config.copyright.title !== 'undefined'">
						<view>{{config.config.copyright.title}} {{config.config.copyright.description}}</view>
						<view>{{config.config.copyright.url}}</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="!loading && config">
			<SaleBar type="MinishopGoods" @getData="getData" :data="data" :config="config" />
		</template>
	</view>
</template>

<script>
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import SaleBar from './_saleBar.vue'
	import Evaluate from '../common/evaluate.vue'

	export default {
		components: {
			FullscreenLoading,
			SaleBar,
			Evaluate
		},
		data() {
			return {
				loading: true, //加载中
				config: {}, //全局配置数据
				urlParams: {}, //url参数
				userInfo : {}, //用户数据
				data: {}, //课程数据
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
				//轮播图相关数据
				videoPlaying: false, //视频播放状态
				current: 1, //轮播第N个索引
				coverTotal: 1,
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			this.getUrlParam(option)
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
				  var arr = scene.split('*')[i].split('/');
				  obj[arr[0]] = arr[1];
				}
			
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				console.log(this.urlParams,'scene')
			}
			Promise.all([this.getConfig(),this.getData()]).then(res => {
				//加载完成
				this.loading = false
			})
			this.getData()
			//实例化视频播放器
			this.videoContext = uni.createVideoContext('coverVideo')
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		methods: {
			/**
			 * 播放轮播内视频
			 */
			playVideo: function(){
				this.videoContext.play()
				this.videoPlaying = true
			},
			/**
			 * 播放轮播内视频暂停
			 */
			pauseVideo: function(){
				this.videoContext.pause()
				this.videoPlaying = false
			},
			/**
			 * 获取配置
			 */
			getConfig: function(){
				let that = this
				return new Promise((resolve, reject) => {
					const config = uni.getStorageSync('minishop_config');
					if(config){
						that.config = config
						resolve(config)
					}else{
						//获取全局配置
						this.util.request({
							url : 'entry/wxapp/minishop',
							data: {
								'action' : 'config'
							},
							success: function (res) {
								console.log(res.data);
								if (res.data.code == 200) {
									that.config = res.data.data
								}
								resolve(res.data)
							}
						})
					}
				})
			},
			//获取url参数
			getUrlParam: function(option){
				// #ifdef MP-WEIXIN
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
			},
			/**
			 * 获取商品详情数据
			 */
			getData: function(){
				let that = this
				let params = this.urlParams
				return new Promise((resolve, reject) => {
					let data = {}
						data.action = 'detail'
						data.m = 'muu_classroom'
						data.id = params.id
						if(params.hasOwnProperty("promoter_uid") && params.promoter_uid !== undefined){
							data.promoter_uid = params.promoter_uid
						}
					//获取首页数据
					this.util.request({
						url : 'entry/wxapp/minishop',
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
								if(res.data.data.images){
									that.coverTotal = res.data.data.images.length + 1
								}
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
			
			swiperChange: function(e){
				console.log(e.detail)
				this.current = e.detail.current + 1
			}
		},
		onReachBottom() {
			console.log('页面滚动到底部')
		},
		
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let promoterUid = this.userInfo.memberInfo.uid || 0
			let share = {
				title : this.data.title,
				path : 'muu_classroom/pages/minishop/detail?' + 'id=' + this.data.id + '&promoter_uid=' + promoterUid,
				desc : this.data.description,
				success : function(){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.cover {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		image {
			width: 100%;
			display: block;
		}
		.swiper {
			width: 750rpx;
			height: 750rpx;
			.swiper-item {
				
			}
			.video-cover {
				position: relative;
				.play-btn {
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -50rpx;
					margin-top: -50rpx;
					width: 100rpx;
					height: 100rpx;
					
					.play {
						font-size: 100rpx;
						color: #fff;
					}
				}
			}
			.video-player {
				background-color: #000;
				padding: 150rpx 0;
				.video {
					width: 750rpx;
					height: 450rpx;
				}
			}
		}
		.current {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			width: 100rpx;
			height: 48rpx;
			border-radius: 20rpx;
			background: rgba(0,0,0,0.2);
			text-align: center;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #fff;
		}
		
	}
	.base-info {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 10px;
		.title {
			font-size: 18px;
			font-weight: 600;
			color: #000;
		}
		.description {
			font-size: 14px;
			color: #999;
		}
		.price {
			font-size: 18px;
			font-weight: 500;
			color: red;
			margin: 10px 0 5px 0;
		}
		.data-info {
			display: flex;
			.marking-price {
				font-size: 14px;
				color: #999;
				text-decoration: line-through;
				width: 30%;
			}
			.exp-info {
				flex: 1;
				width: 70%;
				text-align: right;
				.item {
					display: inline-block;
					color: #999;
					margin: 0 5px;
					font-size: 12px;
					.num {
						margin-left: 5px;
					}
				}
			}
		}
	}
	
	.detail {
		.tab {
			display: flex;
			padding: 5px 0;
			padding: 0 10px 0 10px;
			background-color: #fff;
			.tab-item {
				flex: 1;
				text-align: center;
				line-height: 36px;
				padding-bottom: 4px;
			}
			.tab-item.only {
				flex: none;
				text-align: left;
			}
			.tab-content {
				
			}
			.tab-list {
				
			}
			.active {
				position: relative;
				&:before {
					position: absolute;
					right: 30%;
					left: 30%;
					bottom: 0;
					height: 4px;
					content: '';
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
					background-color: #03b8cf;
				}
			}
		}
		//详情
		.content {
			
			.try-content {
				margin-bottom: 8px;
				padding: 10px;
				background-color: #fff;
			}
			.custom-desc {
				margin-bottom: 8px;
				padding: 10px;
				background-color: #fff;
			}
			.all-content {
				margin-bottom: 8px;
				padding: 10px;
				background-color: #fff;
			}
			.copyright {
				background: #f8f8f8;
				padding: 10px;
				font-size: 12px;
				text-align: center;
				color: #666;
			}
		}
	}

</style>
